<!DOCTYPE HTML>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>jQuery range时间轴滑块拖动设置代码(24小时到分钟格式)</title>

    <style type="text/css">
        .range-demo {
            width: 720px;
            margin: 0 auto;
            margin-top:100px;
        }

        #g1, #g2 {
            margin-top: 50px
        }
    </style>

    <link rel="stylesheet" href="css/jquery.range.css"/>

    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../../src/global/jqueryrange.js"></script>
    <script type="text/javascript">
        $(function () {
            //单个滑块功能初始化
            $('.single-slider').jRange({
                from: 0,
                to: 100,
               step: 1,
			   scale: [0, 25, 50, 75, 100],
                format: '%s',
                width: 300,
                showLabels: true,
                showScale: true
            });
            //双滑块功能初始化
          /*  $('.range-slider').jRange({
                from: 0,//开始于
                to: 23,//结束于
                step: 1 / 60,//一次滑动多少
                scale: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],//滑动条下方的标签组（24小时）
                format: '%s',//格式化格式 字符串
                width: 720,//宽度
                showLabels: true,//是否显示滑动条下方的尺寸标签
                showScale: true,//是否显示滑块上方的数值标签
                isRange: true//是否显示区间
            });*/


            //   $('.range-slider').jRange('setValue', '10.2,15.8');//给双滑块赋值

            //给已经选中过的地方加颜色
            $(".slider-container .back-bar").append('<div class="selected-default-l"></div>');//增加默认选中地方
            $('.selected-default-l').css("left", "10px");

            $(".slider-container .back-bar").append('<div class="selected-default-l s2" ></div>');
            $('.s2').css("left", "600px").css("width", "80px");

            $(".slider-container .back-bar").append('<div class="selected-default-l s3" ></div>');
            $('.s3').css("left", timeToLength("17:20") + "px").css("width", "50px");

            //点击获取值的操作
            $("#g2").click(function () {
                var aa = $(".range-slider").val();
                alert(aa.split(","));
                //		alert(aa.split(",")[0]);
            });
        });
         //保留两位
        function decimal(num, v) {
            var vv = Math.pow(10, v);
            return Math.round(num * vv) / vv;
        }

        //分钟保留两位
        function PrefixInteger(num, length) {
            return (Array(length).join('0') + num).slice(-length);
        }

        //时间转换成标签
        function timeToSpan(values) {
            var v1 = values.split(":");
            var v2 = v1[0] + "." + decimal(v1[1] / 60, 2) * 100;
            return v2;
        }
        //时间转换成控件长度
        function timeToLength(values) {
            var v1 = values.split(":");
            //alert(v1[0]+v1[1]);
            var v2 = v1[0] + "." + decimal(v1[1] / 60, 2) * 100;
            var v3 = (720 / 24) * v2;
            return v3;

        }

         //修改值后操作
         function updateLableP(value){
             var startVal=timeToSpan($("#pointer_lable_left").val());
             var endVal=timeToSpan($("#pointer_lable_right").val());
             if(endVal-startVal>=0){
                 $('.range-slider').jRange('setValue',startVal+","+endVal);
             }else{
                 alert("输入的开始时间不能大于结束时间 or 时间格式错误！！！");
                 var oldValueArrs = $(".range-slider").val().split(",");
                 $('.range-slider').jRange('setValue',timeToSpan(oldValueArrs[0])+","+timeToSpan(oldValueArrs[1]));
             }
         }


    </script>
</head>
<body>
<!--单个滑块demo-->
<!--<div class="demo">-->
<!--<input type="hidden" class="single-slider"/>-->
<!--&lt;!&ndash; <button id="g1">获取值</button> &ndash;&gt;-->
<!--</div>-->

<div class="range-demo">
    <input class="single-slider" type="hidden"/>
  <button id="g2">获取值</button>
</div>

</body>
</html>

